﻿@page "/component/data/pagination"

<Pager DataSource="@(new List<string>(new[] { 
                         "Demo","Size","Hide Total Count","Hide Navigate To","Two-way Binding","Parameters","Events","Methods"
                     }))">
    <Body>
        <Header1 Divider>
            Pagination
        </Header1>
        <Segment>
            Pagination is part of <code>Menu</code> component.
        </Segment>
        <PresentationPart Title="Demo">
            <Description>
                <code>CurrentPage</code> and <code>TotalCount</code> is required, <code>PageSize</code> must larger than 0.
            </Description>
    <RunTemplate>
        <Pagination CurrentPage="1" TotalCount="50"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Pagination CurrentPage=""1"" TotalCount=""50""/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Size">
    <Description>
        Pagination has different size.
    </Description>
    <RunTemplate>
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Mini" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Tiny" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Small" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Medium" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Large" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Big" />
        <br />
        <Pagination CurrentPage="1" TotalCount="100" Size="Size.Massive" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Mini"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Tiny"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Small"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Medium"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Large"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Big"" />
<Pagination CurrentPage=""1"" TotalCount=""100"" Size=""Size.Massive"" />
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Hide Statistic">
    <RunTemplate>
        <Pagination CurrentPage="1" TotalCount="100"  ShowStatistic="false"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Pagination CurrentPage=""1"" TotalCount=""100""  ShowStatistic=""false""/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Hide Navigate To">
    <RunTemplate>
        <Pagination CurrentPage="1" TotalCount="100"  ShowNavigateTo="false"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Pagination CurrentPage=""1"" TotalCount=""100""  ShowNavigateTo=""false""/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Two-way Binding">
    <Description>
        Only <code>CurrentPage</code>, <code>TotalCount</code> and <code>PageSize</code> supports two-way binding.
    </Description>
    <RunTemplate>
@*        <Form Model="this">
            <Field Inline>
                <label>Current</label>
                <InputNumber @bind-Value="CurrentPage" />
                <label>Size</label>
                <InputNumber @bind-Value="PageSize" />
                <label>Total</label>
                <InputNumber @bind-Value="TotalCount" />
            </Field>
        </Form>*@
        <br />
        <Pagination @bind-CurrentPage="CurrentPage" @bind-PageSize="PageSize" @bind-TotalCount="TotalCount"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Form Model=""this"">
    <Field Inline>
        <label>Current</label>
        <InputNumber @bind-Value=""CurrentPage"" />
        <label>Size</label>
        <InputNumber @bind-Value=""PageSize"" />
        <label>Total</label>
        <InputNumber @bind-Value=""TotalCount"" />
    </Field>
</Form>
<Pagination @bind-CurrentPage=""CurrentPage"" @bind-PageSize=""PageSize"" @bind-TotalCount=""TotalCount""/>
```
")
    </CodeTemplate>
</PresentationPart>
                <ParameterTable>
                    <Content>
                        <tr>
                            <td>
                                CurrentPage
                            </td>
                            <td>Support two-way bindings</td>
                            <td>int</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>
                                PageSizeStakeholders
                            </td>
                            <td>The stakeholders of page size option, at lease one element.</td>
                            <td>IEnumerable&lt;int></td>
                            <td>10, 20, 30, 50, 100</td>
                        </tr>
                        <tr>
                            <td>
                                PageSize
                            </td>
                            <td>Support two-way bindings</td>
                            <td>int</td>
                            <td>Using the first element of PageSizeStakeholders</td>
                        </tr>
                        <tr>
                            <td>
                                TotalCount
                            </td>
                            <td>Support two-way bindings</td>
                            <td>int</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                PageNumberCount
                            </td>
                            <td>The count of the page number, the even number of range from 5 to 21</td>
                            <td>int</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>
                                ShowTotalCount
                            </td>
                            <td>Display total count</td>
                            <td>bool</td>
                            <td>true</td>
                        </tr>
                        <tr>
                            <td>
                                ShowNavigateTo
                            </td>
                            <td>Display the "Navigate To"</td>
                            <td>bool</td>
                            <td>true</td>
                        </tr>
                        <tr>
                            <td>
                                Size
                            </td>
                            <td>Size of link</td>
                            <td>Size</td>
                            <td>null</td>
                        </tr>
                        <tr>
                            <td>
                                Alignment
                            </td>
                            <td>Alignment of horizontal</td>
                            <td>JustifyContent</td>
                            <td>JustifyContent.Around</td>
                        </tr>
                    </Content>
        </ParameterTable>
        <CallbackTable>
            <Content>
                <tr>
                    <td>OnCurrentPageChanged</td>
                    <td>A callback method invoked when <code>CurrentPage</code> is changed</td>
                    <td>EventCallback&lt;int></td>
                </tr>
            </Content>
        </CallbackTable>
                <MethodTable>
                    <Content>
                        <tr>
                            <td>NavigateToFirst()</td>
                            <td>Navigate to first page</td>
                        </tr>
                        <tr>
                            <td>NavigateToPrevious()</td>
                            <td>Navigate to previous page</td>
                        </tr>
                        <tr>
                            <td>NavigateToNext()</td>
                            <td>Navigate to next page</td>
                        </tr>
                        <tr>
                            <td>NavigateToLarst()</td>
                            <td>Navigate to Last page</td>
                        </tr>
                        <tr>
                            <td>NavigateToPage(int page)</td>
                            <td>Navigate to specify page</td>
                        </tr>

                    </Content>
        </MethodTable>
    </Body>
</Pager>
@code{
    int CurrentPage=1;
    int PageSize=10;
    int TotalCount=100;
}